import type { FC } from 'react';
import { View, type ViewStyle } from 'react-native';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, Input } from '@/components';
import { primaryColor } from '@/constants/Colors';
import DatePicker from '@/components/DatePicker';
import styles from './styles';

type CreatePostProps = {
  height: number;
  onClose?: () => void;
}

const CreatePost: FC<CreatePostProps> = (props) => {
  const { height } = props;
  const { top } = useSafeAreaInsets();

  const sizeStyles: ViewStyle = {
    height,
    paddingTop: top
  };

  return (
    <View style={[styles.page, sizeStyles]}>
      <View style={styles.content}>
        <View style={styles.header}>
          <Button
            title="Cancel"
            size="mini"
            onPress={props.onClose}
          />
          <Button
            title="Post"
            type="primary"
            size="mini"
          />
        </View>
        <View style={styles.form}>
          <View style={styles.formItem}>
            <Input
              prefix={(focus) => (
                <MaterialIcons
                  size={24}
                  name="subject"
                  color={focus ? primaryColor : "#999"}
                />
              )}
              placeholder='Please enter subject'
            />
          </View>
          <View style={styles.formItem}>
            <Input
              prefix={(focus) => (
                <MaterialIcons
                  size={24}
                  name="subject"
                  color={focus ? primaryColor : "#999"}
                />
              )}
              placeholder='Please enter subject'
            />
          </View>
          <DatePicker />
        </View>
      </View>
    </View>
  );
}

export default CreatePost;